<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 400px;height:200px;border: solid 1px black;display: block;margin: 20px auto;font-size: 30px;text-align: center;}
    .btn{width:200px;height: 100px;font-size: 50px;display: block;margin: 0 auto;}
  </style>
</head>
<body>
  <input type="text" readonly class="box" value="请点击开始按钮点名">
  <input type="button" class="btn" value="开始">
</body>
<script>
  var box = $(".box");
  var btn = $(".btn");

  var names = ["张三", "李四", '王二', "赵五", "钱六"];

  var state = 0;
  var t;

  btn.onclick = function(){
    if(state === 0){
      if( t ) return;
      t = setInterval(function(){
        var i = random( 0, names.length-1 )
        var name = names[i];
        box.value = name;
      }, 30);
      state = 1;
      btn.value = "就是你";
    }else{
      clearInterval( t )
      t = undefined;
      state = 0;
      btn.value = "下一个";
    }
  }

  function random(a,b){
    return Math.round(Math.random()*(a-b)+b)
  }

  function $(s){
    return document.querySelector(s)
  }

  
</script>
</html>